<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN '>
<HTML>
<HEAD>
    <style>
        .m-activity-showBar{overflow:hidden;height:110px;width:750px; }
        .m-activity-showBar .cnt{height:110px;}
        .m-activity-showBar .activityInfo1 .info{display:block;width:100px;}
        .m-activity-showBar .activityInfo2 .info{display:block;width:100px;}
    </style>

</HEAD>
<BODY>

<div id=demo class="m-activity-showBar">
    <table class="cnt">
        <tr>
            <td id=demo1 class="activityInfo1">
                <table>
                    <tr>
                        <td><p class="info">test 获得 xxx</p></td>
                        <td><p class="info">test 获得 xxx</p></td>
                        <td><p class="info">test 获得 xxx</p></td>
                        <td><p class="info">test 获得 xxx</p></td>
                        <td><p class="info">test 获得 xxx</p></td>
                        <td><p class="info">test 获得 xxx</p></td>
                        <td><p class="info">test 获得 xxx</p></td>
                        <td><p class="info">test 获得 xxx</p></td>
                    </tr>
                </table>
            </td>
            <td id=demo2 class="activityInfo2"></td>
        </tr>
    </table>
</div>
<script>
    var speed = 15
    demo2.innerHTML = demo1.innerHTML
    function Marquee() {
        if (demo2.offsetWidth - demo.scrollLeft <= 0)
            demo.scrollLeft -= demo1.offsetWidth
        else {
            demo.scrollLeft++
        }
    }
    var MyMar = setInterval(Marquee, speed)
    demo.onmouseover = function () {
        clearInterval(MyMar)
    }
    demo.onmouseout = function () {
        MyMar = setInterval(Marquee, speed)
    }
</script>
</td>
</tr>
</table>
</BODY>
</HTML>